<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言-闲言轻博客</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <link rel="stylesheet" href="../res/static/css/mian.css">
</head>
<body class="lay-blog">
<#include "../common/header.ftl">
<div class="container-wrap">
    <div class="container container-message">
        <div class="contar-wrap" id="contar-wrap">
            <form class="layui-form" action="">
                <div class="layui-form-item layui-form-text">
                    <textarea class="layui-textarea" id="LAY-msg-content" style="resize:none"></textarea>
                </div>
            </form>
            <div class="item-btn">
                <button class="layui-btn layui-btn-normal" id="item-btn1">提交</button>
            </div>

            <div id="LAY-msg-box">
                <#--留言位置-->
            </div>

            <div id="laypagedemo" class="paging"></div>
        </div>
    </div>
</div>
<div class="footer">
    <p>
        <span>&copy; 2018</span>
        <span><a href="http://www.layui.com" target="_blank">layui.com</a></span>
        <span>MIT license</span>
    </p>
    <p><span>人生就是一场修行</span></p>
</div>
</div>
<script src="../res/layui/layui.js"></script>
<script src="../res/static/js/basePath.js"></script>
<script>
    layui.use(['form', 'jquery', 'layer', 'laytpl', 'laypage'], function () {
        var form = layui.form
                , laypage = layui.laypage
                , layer = layui.layer
                , laytpl = layui.laytpl
                , $ = layui.jquery;

        var ajaxMethd = (function () {
            function init() {

            }

            function save(data) {
                var data = null;
                var parameter = {
                    type: "post",
                    url: webPath + "/api/comment/save",
                    async: true,
                    data: data,
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            var data = res.data;
                            var view = $('#LAY-msg-tpl').html();
                            var elemCont = $('#LAY-msg-content');
                            laytpl(view).render(data, function(html){
                                $('#LAY-msg-box').prepend(html);
                                elemCont.val('');
                                layer.msg('留言成功', {
                                    icon: 1
                                })
                            });
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
            }

            function commentInit(page, size) {
                var data = null;
                var parameter = {
                    type: "post",
                    url: webPath + "/api/comment/list",
                    async: false,
                    data: {"page": page, "size": size,"articleId":0},
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            data = res.data;
                            domMethd.commentInit(data);
                        } else {
                            layer.msg(res.message)
                        }
                    }
                };
                $.ajax(parameter);
                return data;
            }

            return {
                init: init
                , commentInit: commentInit
                , save: save
            }
        })();


        var domMethd = (function () {
            function init() {

            }
            
            function laypager(count){
                //执行一个laypage实例
                laypage.render({
                    elem: 'laypagedemo' //注意，这里的 test1 是 ID，不用加 # 号
                    ,count: count //数据总数，从服务端得到
                    ,limit: 10
                    ,jump: function(obj, first){
                        //do something
                        //首次不执行
                        if(first){
                            return ;
                        }
                        //obj包含了当前分页的所有参数，比如：
                        ajaxMethd.ariaceInit(obj.curr,obj.limit);
                    }
                });
            }


            //文章
            function commentInit(data) {
                var html = laytpl(LAY_tpl.value).render(data.list);
                $('#LAY-msg-box').html(html)
            }


            return {
                init: init
                , laypager: laypager
                , commentInit: commentInit
            }
        })();


        //end 提交
        $('#item-btn1').on('click', function(){
            var elemCont = $('#LAY-msg-content')
                    ,content = elemCont.val();
            if(content.replace(/\s/g, '') == ""){
                layer.msg('请先输入留言');
                return elemCont.focus();
            }

            var view = $('#LAY-msg-tpl').html()

                    //模拟数据
                    ,data = {
                        username: '游客'
                        ,imgUrl: '../res/static/images/info-img.png'
                        ,likeCount: 0
                        ,articleId: 0
                        ,content: content
                    };
                var parameter = {
                    type: "post",
                    url: webPath + "/api/comment/saveOrUpdate",
                    async: true,
                    data: data,
                    success: function (res) {
                        if (res.code == 200 && res.message == "OK") {
                            var data = res.data;
                            laytpl(view).render(data, function(html){
                                $('#LAY-msg-box').prepend(html);
                                elemCont.val('');
                                layer.msg('留言成功', {
                                    icon: 1
                                })
                            });
                        } else {
                            layer.msg(res.message)
                        }
                    }
                }

                $.ajax(parameter);





            //模板渲染
            /*laytpl(view).render(data, function(html){
              $('#LAY-msg-box').prepend(html);
              elemCont.val('');
              layer.msg('留言成功', {
                icon: 1
              })
            });*/

        })

        var data = ajaxMethd.commentInit(0,10);
        domMethd.laypager(data.count);

    });
</script>
<script>
    layui.config({
        base: '../res/static/js/'
    }).use('blog');
</script>
<script id="LAY-msg-tpl" type="text/html">
    <div class="info-box">
        <div class="info-item">
            <img style="width: 88px;height: 68px"  class="info-img" src="{{ d.imgUrl }}" alt="">
            <div class="info-text">
                <p class="title">
                    <span class="name">{{ d.username }}</span>
                    <span class="name">&nbsp;&nbsp;<em>{{ d.creatDate }} </span>
                    <span class="info-img">
					  	<i class="layui-icon layui-icon-praise"></i>
					  	{{ d.likeCount }}
					 	</span>
                </p>
                <p class="info-intr">
                    {{ d.content }}
                </p>
            </div>
        </div>
    </div>
</script>
</body>
<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{#  layui.each(d, function(index, item){ }}
<div class="info-box">
        <div class="info-item">
            {{#   var img = item.imgUrl == null?'../res/static/images/info-img.png':item.imgUrl;  }}
            <img style="width: 88px;height: 68px"  class="info-img" src="{{ img}}" alt="">
            <div class="info-text">
                <p class="title">
                    <span class="name">{{ item.username }}</span>
                    <span class="name">&nbsp;&nbsp;<em>{{ item.creatDate }}</em></span>
                    <span class="info-img">
					  	<i class="layui-icon layui-icon-praise"></i>
					  	{{item.likeCount}}
					 	</span>
                </p>
                <p class="info-intr">
                    {{ item.content }}
                </p>
            </div>
        </div>
    </div>
{{#  }); }}
</textarea>
